@use '../_variables' as *;
@use '../_mixins' as *;
// 作品展示页面样式
.works {
  padding-top: $header-height;

  // 作品列表
  &-grid {
    padding: $spacing-extra-large 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 576px) {
      grid-template-columns: 1fr;
    }
  }

  // 作品卡片
  &-card {
    background: $background-color-white;
    border-radius: $border-radius-base;
    overflow: hidden;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;

      .works-card-image img {
        transform: scale(1.1);
      }
    }

    &-image {
      height: 240px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: $transition-base;
      }
    }

    &-content {
      padding: $spacing-large;
    }

    &-title {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }

    &-category {
      font-size: $font-size-small;
      color: $text-secondary;
      margin-bottom: $spacing-base;
    }

    &-description {
      font-size: $font-size-base;
      color: $text-regular;
      line-height: 1.6;
      margin-bottom: $spacing-base;
      @include text-truncate(3);
    }

    &-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: $spacing-base;
      border-top: 1px solid $border-color-lighter;

      .date {
        font-size: $font-size-small;
        color: $text-secondary;
      }

      .more {
        color: $primary-color;
        font-size: $font-size-base;
        
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  // 筛选栏
  &-filter {
    padding: $spacing-large 0;
    border-bottom: 1px solid $border-color-light;
    margin-bottom: $spacing-large;

    &-list {
      display: flex;
      gap: $spacing-base;
      flex-wrap: wrap;
    }

    &-item {
      padding: $spacing-small $spacing-base;
      border-radius: $border-radius-base;
      cursor: pointer;
      transition: $transition-base;
      
      &:hover,
      &.active {
        background: $primary-color;
        color: $background-color-white;
      }
    }
  }
} 